<template>
    <NDrawer v-model:show="visible" width="800px" placement="right">
        <NDrawerContent title="创建通知类型">
            <NForm ref="formRef" :model="form" :rules="rules">
                <NFormItem label="通知类型" path="msgType">
                    <NSelect
                        v-model:value="form.msgType"
                        :options="messageTypeList"
                        label-field="name"
                        value-field="id"
                    ></NSelect>
                </NFormItem>
                <NFormItem label="标题" path="msgTitle">
                    <NInput v-model:value="form.msgTitle"></NInput>
                </NFormItem>
                <NFormItem label="内容" path="msgContent">
                    <NInput v-model:value="form.msgContent" type="textarea" :row="3"></NInput>
                </NFormItem>
                <NFormItem label="标题(繁体)" path="msgTitleZh">
                    <NInput v-model:value="form.msgTitleZh"></NInput>
                </NFormItem>
                <NFormItem label="内容(繁体)" path="msgContentZh">
                    <NInput v-model:value="form.msgContentZh" type="textarea" :row="3"></NInput>
                </NFormItem>
                <NFormItem label="标题(英文)" path="msgTitleEn">
                    <NInput v-model:value="form.msgTitleEn"></NInput>
                </NFormItem>
                <NFormItem label="内容(英文)" path="msgContentEn">
                    <NInput v-model:value="form.msgContentEn" type="textarea" :row="3"></NInput>
                </NFormItem>
                <NFormItem label="上线" path="status">
                    <NSwitch v-model:value="form.status" size="small" :unchecked-value="2" :checked-value="1" />
                </NFormItem>
            </NForm>
            <template #footer>
                <NButton @click="submit" :loading="submitLoading" type="primary">确定</NButton>
            </template>
        </NDrawerContent>
    </NDrawer>
</template>

<script setup lang="ts">
import { ref, watch, reactive, watchEffect } from 'vue'
import { useMessage, type FormRules, type FormInst } from 'naive-ui'
import { createMessage, queryMessageTypeList, queryMessageDetail, updateMessage } from '@/api/content'

defineOptions({
    name: 'MessageCreateDrawer'
})

const props = defineProps<{
    id: number | null
}>()
const emits = defineEmits<{
    refresh: []
}>()
const message = useMessage()

const visible = defineModel<boolean>({
    required: true
})

const formRef = ref<FormInst | null>(null)
const form = reactive<Api.Content.MessageCreateParams>({
    msgType: null,
    msgTitle: null,
    msgContent: null,
    msgTitleZh: null,
    msgContentZh: null,
    msgTitleEn: null,
    msgContentEn: null,
    status: 1
})

const rules: FormRules = {
    msgType: {
        required: true,
        message: '请选择',
        type: 'number',
        trigger: 'change'
    },
    msgTitle: {
        required: true,
        message: '请输入',
        trigger: 'change'
    },
    msgContent: {
        required: true,
        message: '请输入',
        trigger: 'change'
    },
    msgTitleZh: {
        required: true,
        message: '请输入',
        trigger: 'change'
    },
    msgContentZh: {
        required: true,
        message: '请输入',
        trigger: 'change'
    },
    msgTitleEn: {
        required: true,
        message: '请输入',
        trigger: 'change'
    },
    msgContentEn: {
        required: true,
        message: '请输入',
        trigger: 'change'
    }
}

const detail = ref<Api.Content.Message | null>(null)
const queryDetail = async () => {
    if (!props.id) return
    const [err, res] = await queryMessageDetail(props.id)
    if (!err && res) {
        detail.value = res
        Object.assign(form, res)
    }
}

watchEffect(() => {
    if (props.id) queryDetail()
})

const messageTypeList = ref<Api.Content.MessageTypeList>([])
queryMessageTypeList().then(([err, res]) => {
    if (!err && res) messageTypeList.value = res
})

const submitLoading = ref(false)
async function submit() {
    formRef.value?.validate(async errors => {
        console.log(errors)
        if (errors) return
        props.id ? edit() : add()
    })
}

async function add() {
    submitLoading.value = true
    const [err, res] = await createMessage(form)
    submitLoading.value = false
    if (!err) {
        if (res) message.success('操作成功')
        visible.value = false
        emits('refresh')
    }
}

async function edit() {
    submitLoading.value = true
    const [err, res] = await updateMessage(props.id!, form)
    submitLoading.value = false
    if (!err) {
        if (res) message.success('操作成功')
        visible.value = false
        emits('refresh')
    }
}
</script>
